import { defineComponent, computed, ref } from 'vue'
import { useParent, useLazyRender, usePrefix } from '../hooks'
import { PANEL_KEY } from './CompositePanel'
import { TextWidget, IconWidget } from '../widgets'
import cls from 'classnames'

export const CompositePanelItem = defineComponent({
  name: 'CompositePanelItem',
  props: ['icon', 'title'],
  setup(props, { slots }) {
    const { parent, index }: any = useParent(PANEL_KEY)
    const prefix = usePrefix('composite-panel')
    const pinning = ref(false)

    const active = computed(() => {
      return index.value === parent.activeKey.value
    })

    const lazyRender = useLazyRender(() => active.value)

    const renderContent = lazyRender(() => {
      return (
        <div v-show={active.value} class={cls(prefix + '-tabs-content')}>
          <div class={prefix + '-tabs-header'}>
            <div class={prefix + '-tabs-header-title'}>
              <TextWidget title={props.title}></TextWidget>
            </div>
            <div class={prefix + '-tabs-header-actions'}>
              {!pinning.value && (
                <IconWidget
                  infer="PushPinOutlined"
                  class={prefix + '-tabs-header-pin'}
                />
              )}
              {pinning.value && (
                <IconWidget
                  infer="PushPinFilled"
                  class={prefix + '-tabs-header-pin-filled'}
                />
              )}
              <IconWidget infer="Close" class={prefix + '-tabs-header-close'} />
            </div>
          </div>
          <div class={prefix + '-tabs-body'}>{slots.default?.()}</div>
        </div>
      )
    })

    return () => <>{renderContent()}</>
  },
})
